<!--
 * @Author: wwssaabb
 * @Date: 2021-06-23 11:21:56
 * @LastEditTime: 2021-06-24 15:01:14
 * @FilePath: \sass_demo\Progress Bar\index.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Check Box</title>
  <link href="https://fonts.font.im/css?family=MedievalSharp" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="container">
    <canvas class="bar"></canvas>
    <div class="progress_bar">
      <div class="progress_bar_start"></div>
      <div class="progress_bar_board">50%</div>
    </div>
    <div class="control">
      <p>修改:</p>
      <input type="number" value='50' min='0' max='100' onchange="changeProgress(this.value)">
    </div>
  </div>

  <script>
    //用rem来设置canvas的长宽
    /* let root=document.getElementsByTagName('html')[0]
    let _rem=root.style.fontSize?root.style.fontSize:(16+'px')
    console.log(_rem) */
    //用vw、vh来设置canvas的长宽
    var _progress=50
    let _vw=document.getElementsByTagName('html')[0].clientWidth
    let canvas = document.querySelector('canvas')
    let c_w=_vw*.3-20
    let l_c_w=_vw*.03
    //let c_h=_vw*.3-20   宽高相等
    canvas.setAttribute('width',c_w+'px')
    canvas.setAttribute('height',c_w+'px')
    var ctx = canvas.getContext('2d')
    
    ctx.beginPath()
    ctx.arc(parseInt(c_w/2),parseInt(c_w/2),parseInt(c_w/2),0,Math.PI)
    ctx.lineTo(parseInt(c_w/2),parseInt(c_w/2))
    ctx.fillStyle='cyan'
    ctx.fill()
    ctx.closePath()
    
    let board=document.querySelector('.progress_bar_board')
    let input=document.querySelector('input')

    function setProgress(num,r=c_w/2){
      if(isNaN(num)){
        throw new TypeError('need introduction number')
      }
      board.innerHTML=num+'%'
      let deg=360*num/100/180

      let count=498/16.6
      let counter=0

      let timer=setInterval(() => {
        if(counter<count){
          counter++
          ctx.clearRect(0,0,c_w,c_w)

          ctx.beginPath()
          ctx.arc(parseInt(c_w/2),parseInt(c_w/2),parseInt(c_w/2),0,Math.PI*deg/count*counter)
          ctx.lineTo(parseInt(c_w/2),parseInt(c_w/2))
          ctx.fillStyle='cyan'
          ctx.fill()
          ctx.closePath()
        }else{
          clearInterval(timer)
          timer=null
        }

      }, 16.6);
      
      
    }

    function changeProgress(value){
      value=parseInt(value)
      _progress=value<0?0:value>100?100:value
      input.value=_progress
      setProgress(_progress)
    }
    
    var resize_timer=null
    window.onresize=()=>{
      _vw=document.getElementsByTagName('html')[0].clientWidth
      c_w=_vw*.3-20
      l_c_w=_vw*.03
      canvas.setAttribute('width',c_w+'px')
      canvas.setAttribute('height',c_w+'px')
      if(resize_timer){
        clearTimeout(resize_timer)
        resize_timer=null
      }
      resize_timer=setTimeout(()=>{
        setProgress(_progress)
      },1000)
      
    }

  </script>
</body>
</html>